<template>
  <div>
    <!-- <h3>当前的count值为: {{ count }}</h3> -->
    <h3>{{ showNum }}</h3>
    <button @click="handleSub">-1</button>
    <button @click="handleSubN">-N</button>
    <button @click="handleSubAction">-1 (async: 1s)</button>
    <button @click="handleSubNAction">-N (async: 1s)</button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync']),
    handleSub() {
      this.sub()
    },
    handleSubN() {
      this.subN(this.$math.ceil(this.$math.random() * 10))
    },
    handleSubAction() {
      this.subAsync()
    },
    handleSubNAction() {
      this.subNAsync(this.$math.ceil(this.$math.random() * 10))
    }
  }
}
</script>

<style lang="less" scoped></style>
